<template>
    <el-dialog
    v-model="importDialogVisible"
    title="添加回访信息"
    width="40%"
    center
    @close="closeDialog(false)"
  >
数据分配：
    <el-switch
    v-model="distribute"
    active-text="分配"
    inactive-text="不分配"
  >
  </el-switch>
    <br />
    选择文件：<el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="handleBeforeUpload"
          :headers="headers"
          accept=".xls,.xlsx" >
    <i class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>

  </el-dialog>
</template>

<script>
import { ElMessage } from 'element-plus'
import { computed, reactive,toRefs } from 'vue'
export default {
    props:{
      importDialogVisible:Boolean
    },
    setup(props,{emit}){
        const state=reactive({
          headers:{ Authorization: window.sessionStorage.getItem("tokenStr") },
          importDialogVisible: props.importDialogVisible,
            distribute : false,
            uploadUrl: computed(()=>{return '/sell/customer/depository/import/'+state.distribute})
        })
       

           //客户信息上传
    const handleAvatarSuccess = (res) => {
      ElMessage.success(res.message)
      emit('onCloseImportDialog',false,{})
    };

    const handleBeforeUpload = (file) => {
     
      const name = file.name.split(".")[1];
      if (!["xls", "xlsx"].includes(name)) {
        ElMessage({
          showClose: true,
          message: "请上传Excel文件",
          type: "error",
        });
        return false;
      }

      return true;
    };
        const closeDialog=(v)=>{
          emit('onCloseImportDialog',false,{})
        }

        return {
            ...toRefs(state),
            handleAvatarSuccess,
            handleBeforeUpload,
            closeDialog

        }

    }


}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 18px;
  color: #8c939d;
  width: 88px;
  height: 88px;
  line-height: 88px;
  text-align: center;
}
.avatar {
  width: 88px;
  height: 88px;
  display: block;
}
</style>